let gulp = require('gulp');
let replace = require('gulp-replace') // 文件名替换
// let concat = require('gulp-concat') // 合并文件
let babel = require('gulp-babel'); // es6语法编译
let uglify = require('gulp-uglify'); // js代码压缩
let notify = require('gulp-notify'); // 编译错误提示
let del = require('del');
let fileSync = require('gulp-file-sync');
gulp.task('delete', () => {
    return del(['JinrLent'], () => {
        notify({
            message: '删除成功'
        })
    });
})




// gulp.task('default', () => gulp.start(
//     'js',
//     'css',
//     'html'
// ))



////编译压缩js文件
let browserify = require('gulp-browserify')
let sourcemaps = require('gulp-sourcemaps')

gulp.task('js', function () {
    return gulp.src('./src/**/*.js')
        .pipe(babel({
            babelrc: false,
            // presets: ['es2015', 'es2016', 'es2017'],
            plugins: ['transform-es2015-modules-commonjs']
        }))
        .pipe(browserify({
            insertGlobals: true,
            debug: true
        }))
        .pipe(babel({
            babelrc: false,
            presets: ['es2015', 'es2016', 'es2017'],
            // plugins: ['transform-es2015-modules-commonjs']
        }))
        .pipe(uglify()) // 压缩js
        .pipe(gulp.dest('JinrLent')) //输出
        .pipe(notify({
            message: "js task ok"
        })); //提示
})


// 编译sass
let sass = require('gulp-sass') // scss 编译为css
let cssMinify = require('gulp-minify-css') //css压缩
let autoprefixer = require('gulp-autoprefixer') // 自动补齐浏览器内核前缀
let px2rem = require('gulp-px3rem')
gulp.task('css', () => gulp.src('./src/**/*.scss')
    .pipe(sass())
    .pipe(px2rem({ // 将px转换为rem
        baseDpr: 2, //基础设备像素比例（默认值：2）
        threeVersion: false, //是否生成@ 1x，@ 2x和@ 3x版本（默认值：false）
        remVersion: true, //是否生成rem版本（默认值：true）
        remUnit: 75, // rem单位值（默认值：75）
        remPrecision: 6 // rem精确度（默认值：6）
    }))
    .pipe(cssMinify())
    .pipe(autoprefixer({
        browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'],
        cascade: false
    }))
    .pipe(gulp.dest('JinrLent'))
)

// HTML 压缩
let htmlmin = require('gulp-htmlmin')
let options = {
    removeComments: true, //清除HTML注释
    // collapseWhitespace: true, //压缩HTML
    // minfyJS: true, //压缩JS
    // minfyCss: true, //压缩CSS
}
gulp.task('html', () => gulp.src('./src/**/*.html')
    .pipe(htmlmin(options))
    .pipe(gulp.dest('JinrLent'))
)

/// img 压缩
let imagemin = require('gulp-imagemin')
gulp.task('img', function () {
    gulp.src('./src/**/*.{jpg,png,gif}')
        .pipe(imagemin())　　　　　　　　 //压缩后放在那个文件夹
        .pipe(gulp.dest("JinrLent"))
});

// 模块热替换
let browserSync = require('browser-sync').create()
// let  reload = browserSync.reload;
// let  nodemon = require('gulp-nodemon')
// let proxyMiddleware = require('http-proxy-middleware');
// let contect = require('gulp-connect')


// 启动本地服务器
gulp.task('server', ["delete"], function () {
    // var middleware = proxyMiddleware(opt);
    gulp.start('js', 'css', 'html', 'img');
    browserSync.init({
        port: 2017,
        // proxy: {
        //     target: "http://yourlocal.dev",
        //     middleware: function (req, res, next) {
        //         console.log(req.url);
        //         next();
        //     }
        // },
        server: {
            baseDir: './',
            // index: 'index.html',
            // middleware: [middleware]
        },
        browser: 'chrome',
        notify: false,
        // server: {
        //     baseDir: ['JinrLent/view/page']
        // },
        watch: ['JinrLent/*.*']
    });
    gulp.watch('./src/**/*.js', ['js']); //监控文件变化，自动更新
    gulp.watch('./src/**/*.scss', ['css']);
    gulp.watch('./src/**/*.html', ['html']);
    gulp.watch('./src/**/*.html', ['img']);

    // gulp.watch(['src/**/*'], function () { // 文件夹时时同步更新
    //     fileSync('src', 'JinrLent', {
    //         recursive: true,
    //         addFileCallback(){
    //             gulp.watch('./src/**/*.js', ['js']);
    //             gulp.watch('./src/**/*.scss', ['css']);
    //             gulp.watch('./src/**/*.html', ['html']);
    //         }
    //     });
    // });
});


gulp.task('default', ['server'])